<!doctype html>
<html lang="zh-CN">
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="css/home.css">
    <link rel="stylesheet" href="css/payment.css">
    <!-- <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 492px;
            position: relative;
            overflow: hidden;
            float: left;
            margin: 20px;
            margin: -250px 0px 0px 900px;
        }

        .slidebox {
            width: 300px;
            position: absolute;
            top: 0;
            left: 0;
            height: 300px;
        }

        .slidebox li {
            float: left;
            width: 290px;
            height: 120px;
            left: 0;
            top: 0;
            border: 1px #D0E0F1 solid;
            margin: 0px 0px 0px -10px;
        }

        .slidebox li img {
            display: block;
            width: 120px;
            height: 117px;
            margin: 3px 0px 0px 0px;
        }

        /*.dot {position:absolute;width:100%;height:30px;background:rgba(0,0,0,0.3);text-align:right;bottom:0;left:0;}*/
        .dot {
            position: absolute;
            width: 100%;
            height: 30px;
            text-align: right;
            bottom: 0;
            left: 0;
        }

        .dot p {
            margin-right: 10px;
        }

        .dot b {
            width: 17px;
            height: 17px;
            border-radius: 20px;
            color: #333;
            display: inline-block;
            border: 1px solid #fff;
            background: #fff;
            text-align: center;
            line-height: 17px;
            margin: 0 3px;
            margin-top: 6px;
            cursor: pointer;
            font-weight: normal;
        }

        .dot .cur {
            background: #F63;
            color: #fff;
            border: 1px solid #f63;
        }
    </style>
     -->

</head>

<body>
    <!-- 保存成功的警告框 -->
    <div class="alert alert-success savaSucess fade in  hide" role="alert" id="savaSucess">保存成功!</div>
    <!-- 保存失败的警告框 -->
    <div class="alert alert-danger savefail  fade in  hide" role="alert" id="savefail">对不起，保存失败</div>

    <!-- 模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">收货地址</h4>
                </div>
                <div class="modal-body">
                    <!-- 表单 -->
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">收货人姓名</label>
                            <div class="col-sm-6"><input type=text” class="form-control" placeholder="请输入收货人姓名"
                                    id='username' />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">配送区域</label>
                            <div class="col-sm-6"><input type=text” class="form-control" placeholder="请输入配送区域"
                                    id="area" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">详细地址</label>
                            <div class="col-sm-6"><input type=text” class="form-control" placeholder="请输入详细地址"
                                    id="addr" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">手机</label>
                            <div class="col-sm-6"><input type=text” class="form-control" placeholder="请输入手机"
                                    id="phone" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">固定电话</label>
                            <div class="col-sm-6"><input type=text” class="form-control" placeholder="请输入固定电话"
                                    id="tel" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default save" data-dismiss="modal"
                        onclick="saveInfo()">保存</button>
                </div>
            </div>
        </div>
    </div>


<!--      &lt;!&ndash; 头部 &ndash;&gt;-->
<!--      <div>-->
<!--        <div class="site-topbar">-->
<!--            <div class="container">-->
<!--                <div class="topbar-nav">-->
<!--                    <a rel="nofollow" href="#">联系我们</a>-->
<!--                    <span class="sep">|</span>-->
<!--                    <a rel="nofollow" href="#" target="_blank">个人中心</a>-->
<!--                    <span class="sep">|</span>-->
<!--                    <a rel="nofollow" href="#" target="_blank">我的订单</a>-->
<!--                    <span class="sep">|</span>-->
<!--                    <a rel="nofollow" href="#" target="_blank">笔记本电脑</a>-->
<!--                    <span class="sep">|</span>-->
<!--                    <a rel="nofollow" href="#" target="_blank">笔记本</a>-->
<!--                    <span class="sep">|</span>-->
<!--                    <a rel="nofollow" href="#" target="_blank">游戏本</a>-->
<!--                    <span class="sep">|</span>-->
<!--                    <a rel="nofollow" href="#" target="_blank">关注商城</a>-->
<!--                    <span class="sep">|</span>-->
<!--                    <a rel="nofollow" href="#" target="_blank">ENGLISH</a>-->


<!--                </div>-->
<!--                <div class="topbar-cart">-->
<!--                    &lt;!&ndash; <div class="topbar-cart topbar-cart-active"> &ndash;&gt;-->
<!--                    <a rel="nofollow" href="#" class="cart-mini">-->
<!--                        <em class="iconfont-cart"></em>-->
<!--                        <em class="iconfont-cart-full hide"></em>购物车-->
<!--                        <span class="cart-mini-num J_cartNum">（0）</span>-->
<!--                    </a>-->
<!--                    <div id="J_miniCartMenu" class="cart-menu " style="height: 0;">-->
<!--                        &lt;!&ndash; <div id="J_miniCartMenu" class="cart-menu " style="height: 100px;"> &ndash;&gt;-->
<!--                        <div class="menu-content">-->
<!--                            <div class="loading hide">-->
<!--                                <div class="loader">-->

<!--                                </div>-->
<!--                            </div>-->
<!--                            <ul id="J_miniCartList" class="cart-list hide"></ul>-->
<!--                            <div id="J_miniCartListTotal" class="cart-total clearfix hide">-->

<!--                            </div>-->
<!--                            <div class="msg msg-error hide">-->
<!--                            </div>-->
<!--                            <div class="msg msg-empty">购物车中还没有商品，赶紧选购吧！</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="topbar-info">-->
<!--                    <a rel="nofollow" href="javascript:void(0);" class="link">登录</a>-->
<!--                    <span class="sep">|</span>-->
<!--                    <a rel="nofollow" href="javascript:void(0);" class="link">注册</a>-->
<!--                    <span class="sep">|</span><span class="message">-->
<!--                        <a rel="nofollow" href="javascript:void(0);" class="J_needAgreement">消息通知-->
<!--                            <i class="J_miMessageTotal"></i>-->
<!--                        </a>-->
<!--                    </span>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="site-header">-->
<!--            <div class="container">-->
<!--                <div class="header-logo" style="background-image: 2021030212152891822.png;">-->
<!--                    <img style="border-radius:30px;width: 200px; height:40px;float: left;margin: 10px 0px 0px 0px;"-->
<!--                        src="imag/jxs.png">-->
<!--                    &lt;!&ndash;<a href="assets/static/image/logo-mi2.png" title="小米官网" class="logo ir">小米官网</a>&ndash;&gt;-->
<!--                </div>-->
<!--                <div class="header-nav">-->
<!--                    <ul class="nav-list J_navMainList clearfix">-->
<!--                        <li class="nav-category">-->
<!--                            <a href="#" class="link-category">-->
<!--                                <span class="text">全部商品分类</span>-->
<!--                            </a>-->
<!--                            <div class="site-category" style="display: block;">-->
<!--                            </div>-->
<!--                        </li>-->
<!--                        <li class="nav-item">-->
<!--                            &lt;!&ndash; <li class="nav-item nav-item-active"> &ndash;&gt;-->
<!--                            <a href="javascript: void(0);" class="link">-->
<!--                                <span class="text">首页</span>-->
<!--                            </a>-->
<!--                            <div class="item-children">-->
<!--                                <div class="container">-->
<!--                                    <ul class="children-list clearfix">-->
<!--                                        <li class="first">-->
<!--                                            <a href="#" target="_blank">-->
<!--                                                <div class="figure figure-thumb">-->
<!--                                                    <img src="imag/home/shoji02.png" alt="Xiaomi Civi" width="160"-->
<!--                                                         height="110">-->
<!--                                                </div>-->
<!--                                                <div class="title">Xiaomi Civi</div>-->
<!--                                                <p class="price">2599元起</p>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <a href="#" target="_blank">-->
<!--                                                <div class="figure figure-thumb">-->
<!--                                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160"-->
<!--                                                         height="110">-->
<!--                                                </div>-->
<!--                                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                                <p class="price">4999元起</p>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <a href="#" target="_blank">-->
<!--                                                <div class="figure figure-thumb">-->
<!--                                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160"-->
<!--                                                         height="110">-->
<!--                                                </div>-->
<!--                                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                                <p class="price">4999元起</p>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <a href="#" target="_blank">-->
<!--                                                <div class="figure figure-thumb">-->
<!--                                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160"-->
<!--                                                         height="110">-->
<!--                                                </div>-->
<!--                                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                                <p class="price">4999元起</p>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <a href="#" target="_blank">-->
<!--                                                <div class="figure figure-thumb">-->
<!--                                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160"-->
<!--                                                         height="110">-->
<!--                                                </div>-->
<!--                                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                                <p class="price">4999元起</p>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <a href="#" target="_blank">-->
<!--                                                <div class="figure figure-thumb">-->
<!--                                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160"-->
<!--                                                         height="110">-->
<!--                                                </div>-->
<!--                                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                                <p class="price">4999元起</p>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </li>-->
<!--                        <li class="nav-item">-->
<!--                            <a href="javascript: void(0);" class="link">-->
<!--                                <span class="text">笔记本</span>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li class="nav-item">-->
<!--                            <a href="javascript: void(0);" class="link">-->

<!--                                <span class="text">轻薄本</span>-->
<!--                            </a>-->
<!--                            <div class="item-children">-->
<!--                                <div class="container">-->
<!--                                    <ul class="children-list clearfix">-->
<!--                                        <li class="first">-->
<!--                                            <a href="#" target="_blank">-->
<!--                                                <div class="figure figure-thumb">-->
<!--                                                    <img src="imag/home/shoji02.png" alt="Xiaomi Civi" width="160"-->
<!--                                                         height="110">-->
<!--                                                </div>-->
<!--                                                <div class="title">Xiaomi Civi</div>-->
<!--                                                <p class="price">2599元起</p>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <a href="#" target="_blank">-->
<!--                                                <div class="figure figure-thumb">-->
<!--                                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160"-->
<!--                                                         height="110">-->
<!--                                                </div>-->
<!--                                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                                <p class="price">4999元起</p>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <a href="#" target="_blank">-->
<!--                                                <div class="figure figure-thumb">-->
<!--                                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160"-->
<!--                                                         height="110">-->
<!--                                                </div>-->
<!--                                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                                <p class="price">4999元起</p>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <a href="#" target="_blank">-->
<!--                                                <div class="figure figure-thumb">-->
<!--                                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160"-->
<!--                                                         height="110">-->
<!--                                                </div>-->
<!--                                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                                <p class="price">4999元起</p>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <a href="#" target="_blank">-->
<!--                                                <div class="figure figure-thumb">-->
<!--                                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160"-->
<!--                                                         height="110">-->
<!--                                                </div>-->
<!--                                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                                <p class="price">4999元起</p>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </li>-->

<!--                        <li class="nav-item">-->
<!--                            <a href="javascript: void(0);" class="link">-->
<!--                                <span class="text">电竞主机</span>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li class="nav-item">-->
<!--                            <a href="javascript: void(0);" class="link">-->
<!--                                <span class="text">显示器</span>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li class="nav-item">-->
<!--                            <a href="javascript: void(0);" class="link">-->
<!--                                <span class="text">智潮外设</span>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li class="nav-item">-->
<!--                            <a href="javascript: void(0);" class="link">-->
<!--                                <span class="text">品牌介绍</span>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li class="nav-item">-->
<!--                            <a href="javascript: void(0);" class="link">-->
<!--                                <span class="text">机油宝典</span>-->
<!--                            </a>-->
<!--                        </li>-->

<!--                        <li class="nav-item">-->
<!--                            <a href="javascript: void(0);" class="link">-->
<!--                                <span class="text">售后查询</span>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="header-search">-->
<!--                    <form id="J_searchForm" action="#" method="get" class="search-form clearfix">-->
<!--                        <label for="search" class="hide">站内搜索</label>-->
<!--                        <a class="no-style-msq">-->
<!--                            <input type="search" id="search" name="keyword" class="search-text" placeholder="手机">-->
<!--                        </a>-->
<!--                        <a id="J_submitBtn" class="no-style-msq">-->
<!--                            <input type="submit" value="&#xe616;" class="search-btn iconfont">-->
<!--                        </a>-->
<!--                    </form>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="header-nav-menu slide-up" style="display: none;">-->
<!--                <div class="container">-->
<!--                    <ul class="children-list clearfix">-->
<!--                        <li class="first">-->
<!--                            <a href="#" target="_blank">-->
<!--                                <div class="figure figure-thumb">-->
<!--                                    <img src="imag/home/shoji02.png" alt="Xiaomi Civi" width="160" height="110">-->
<!--                                </div>-->
<!--                                <div class="title">Xiaomi Civi</div>-->
<!--                                <p class="price">2599元起</p>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="#" target="_blank">-->
<!--                                <div class="figure figure-thumb">-->
<!--                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160" height="110">-->
<!--                                </div>-->
<!--                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                <p class="price">4999元起</p>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="#" target="_blank">-->
<!--                                <div class="figure figure-thumb">-->
<!--                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160" height="110">-->
<!--                                </div>-->
<!--                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                <p class="price">4999元起</p>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="#" target="_blank">-->
<!--                                <div class="figure figure-thumb">-->
<!--                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160" height="110">-->
<!--                                </div>-->
<!--                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                <p class="price">4999元起</p>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="#" target="_blank">-->
<!--                                <div class="figure figure-thumb">-->
<!--                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160" height="110">-->
<!--                                </div>-->
<!--                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                <p class="price">4999元起</p>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="#" target="_blank">-->
<!--                                <div class="figure figure-thumb">-->
<!--                                    <img src="imag/home/shoji02.png" alt="Xiaomi MIX 4" width="160" height="110">-->
<!--                                </div>-->
<!--                                <div class="title">Xiaomi MIX 4</div>-->
<!--                                <p class="price">4999元起</p>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 头部 &ndash;&gt;-->
<!--   -->


    <div class="wrap">
        <div class="head">
            <a class="logo" href="javascript:;">
                <img src="imag/logo.png">
            </a>
            <div class="header-right-container">
                <div class="stepflex ns-border-color-gray">
                    <dl class="first done ns-border-color">
                        <dt class="s-num ns-bg-color">1</dt>
                        <dd class="s-text ns-text-color">1.我的购物车</dd>
                    </dl>
                    <dl class="normal doing ns-border-color">
                        <dt class="s-num ns-bg-color">2</dt>
                        <dd class="s-text ns-text-color">2.确认订单</dd>
                    </dl>
                    <dl class="normal last ns-border-color-gray">
                        <dt class="s-num ns-bg-color-gray">3</dt>
                        <dd class="ns-text-color-gray">3.提交订单</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="tit-txt">
            <p>填写并核对订单信息</p>
        </div>
        <!-- 订单详情 -->
        <div class="member-payment">
            <!-- 1.收货人信息 -->
            <div class="constent3 content1">
                <div class="content1-head">
                    <h3>收货人信息</h3>
                    <span class="operation">
                        <a href="javascript:;" data-toggle="modal" data-target="#myModal"> 新增收货地址</a>
                    </span>
                </div>
                <div class="payment-type-cont" th:each="addr,stat:${addresslist}">
                    <ul class="clearfix type-ul">

                        <a href="javascript:;">
                            <li class="type-li ">
                                <!--    activefirst-->
                                <div class="type-item selectcommon" th:id="${addr.id}"
                                    th:onclick="'javascript:changecur(\''+${addr.id}+'\');'">
                                    <span>在线支付</span>
                                    <!-- 需要去官网下载 -->
                                    <img src="imag/icon.png">

                                </div>
                                <div class="addr-detail">
                                    <span class="basic-info">
                                        <span class="baslc-info-item">
                                            [[${addr.address}]]
                                        </span>
                                        <!--                                        <span class="baslc-info-item">-->
                                        <!--                                            重庆市-->
                                        <!--                                        </span>-->
                                        <!--                                        <span class="baslc-info-item">-->
                                        <!--                                            九龙坡区-->
                                        <!--                                        </span>-->
                                        <span class="baslc-info-item">
                                            [[${addr.name}]]
                                        </span>
                                    </span>
                                    <span class="addr-tel"> [[${addr.phone}]]</span>
                                    <span class="  default-icon ns-bg-çolor  addrcommon"
                                        th:id="'addr' +${addr.id}">默认地址</span>
                                    <span class="option">
                                        <span class="option-del"
                                            th:onclick="'javascript:delInfo(\''+${addr.id}+'\');'">删除</span>
                                    </span>
                                </div>

                            </li>
                        </a>

                        <!-- <a href="javascript:;">
                            <li class="type-li ">
                                <div class="type-item selectcommon"  onclick="changecur('f')"   id='f'>
                                    <span>在线支付</span>
                                    <img src="img/icon.png">
                                </div>
                                <div class="addr-detail">
                                    <span class="basic-info">
                                        <span class="baslc-info-item">
                                            重庆市
                                        </span>
                                        <span class="baslc-info-item">
                                            重庆市
                                        </span>
                                        <span class="baslc-info-item">
                                            九龙坡区
                                        </span>
                                        <span class="baslc-info-item">
                                            hangzhou
                                        </span>
                                    </span>
                                    <span class="addr-tel">158***5822</span>
                                    <span class="default-icon ns-bg-çolor">默认地址</span>
                                    <span class="option">
                                        <span class="option-edit" data-toggle="modal" data-target='#myModal'>编辑</span>
                                        <span class="option-del">删除</span>
                                    </span>
                                </div>
                            </li>
                        </a>
 -->



                    </ul>

                </div>

            </div>

            <!-- 配送方式 -->
            <div class="constent3">
                <h3>配送方式</h3>
                <div class="payment-type-cont">
                    <div class="info-mark">物流公司选择</div>
                    <ul class="clearfix">
                        <a href="javascript:;" onclick="selectCompany('yunda')">
                            <li class="active type-item" id="yunda">
                                <span>韵达快递</span>
                                <!-- 需要更改的图片 -->
                                <img src="imag/icon.png">
                            </li>
                        </a>
                        <a href="javascript:;" onclick="selectCompany('ems')">
                            <li class=" type-item" id="ems">
                                <span>EMS快递</span>
                                <!-- 需要更改的图片 -->
                                <img src="imag/icon.png">
                            </li>
                        </a>
                        <a href="javascript:;" onclick="selectCompany('yuant')">
                            <li class=" type-item" id="yuant">
                                <span>圆通快递</span>
                                <!-- 需要更改的图片 -->
                                <img src="imag/icon.png">
                            </li>
                        </a>
                        <a href="javascript:;" onclick="selectCompany('zhongt')">
                            <li class=" type-item" id="zhongt">
                                <span>中通快递</span>
                                <!-- 需要更改的图片 -->
                                <img src="imag/icon.png">
                            </li>
                        </a>
                        <a href="javascript:;" onclick="selectCompany('shunf')">
                            <li class=" type-item" id="shunf">
                                <span>顺丰快递</span>
                                <!-- 需要更改的图片 -->
                                <img src="imag/icon.png">
                            </li>
                        </a>

                    </ul>
                </div>
            </div>

            <!-- 3.支付方式 -->
            <div class="constent3">
                <h3>支付方式</h3>
                <div class="payment-type-cont">
                    <ul class="clearfix">
                        <a href="javascript:;">
                            <li class=" active type-item"><span>在线支付</span> <!-- 需要更改的图片 --> <img src="imag/icon.png">
                            </li>
                        </a>

                    </ul>
                </div>
            </div>

            <!-- 4.商品清单 -->
            <!-- <div class="constent3  constent4" style="border: none;">
                <div class="constent1-head">
                    <h3>商品清单</h3>
                    <span class="option"><a href="javascript:;">反汇购物车</a></span>
                </div>
                <div class="shopping-content row">
                    <div class="col-md-4 shopping-left">
                        <div class="item-tit">
                            <h4>其他信息</h4>
                        </div>
                        <div class="distribution-time logistics "><span class="tit ns-text-color-gray">配送时间：</span>
                            <time data-time="0" data-time-slot="">工作日、双休日与节假日均可送货</time>
                        </div>
                        <div class="user-message"><span class="tit ns-text-color-gray">用户留言：</span> <textarea
                                class="form-control" row='3'
                                style="display: inline-block !important; width: 260px;"></textarea></div>
                    </div>
                    <div class="col-md-8 shopping-right">
                        <div class="item-tit">
                            <h4 style="font-weight: bold;">商家:机械师НACHENIKE官网</h4>
                        </div>
                        <div class="product-list">
                            <div class="product-item clearfix">
                                <div class="p-img ns-border-color-gray"><a
                                        href="javascript:;" ><img
                                            src="https://static.jixieshi.cn/upload/goods/2020101511201436774_SMALL.jpg"></a>
                                </div>
                                <div class="p-name"><a href="javascript:;">机械师F117-FP30 11代新品金属游戏本</a>
                                    <p class="sku-name ns-text-color-gray">RTX3050/144Hz屏 【标准版】8G+512G固态 </p>
                                </div>
                                <div class="unit-price"><span class="price ns-text-color">￥7699.00</span></div>
                                <div class="p-num">x1</div>
                                <div class="subtotal"><span class="price ns-text-color">￥7699.00</span></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div> -->

            <div class="constent3" style="border: none">
                <div class="content1-head">
                    <h3>商品清单</h3>
                    <span class="operation"><a href="javascript:Address.addAddress();" data-toggle="modal"
                            data-target="myModal"><a href="st.html">返回购物车</a></a></span>
                </div>
                <div class="row" style="background-color:rgba(229,229,229,0.5) !important">
                    <div class="col-xs-4 shopping-left">
                        <p class="shopping-other">其他信息</p>
                        <p>
                            <span class="gray">配送时间：</span>工作日、双休日与节假日均可送货
                        </p>
                        <div>
                            <span class="gray">用户留言：</span>
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="col-xs-8 shopping-right">
                        <p class="shopping-other">商家：机械师MACHENIKE官网</p>
                        <!-- 一个列表 -->
                        <div class="row shopping-row" th:each="oshop,stat:${ordershop}">
                            <div class="col-xs-2  new-img  ">
                                <img th:src="@{'imag/'+${oshop.mainImage}}">
                            </div>
                            <div class="col-xs-5">
                                <p>[[${oshop.cmmodityName}]]</p>
                                <p class="sku-name ns-text-color-gray">RTX3050/144Hz屏 【标准版】8G+512G固态 </p>
                            </div>
                            <div class="unit-price col-xs-2 alignright"><span
                                    class="price ns-text-color">￥[[${oshop.pricecommodity}]]</span></div>
                            <div class="p-num col-xs-1 alignright">x[[${oshop.num}]]</div>
                            <div class="subtotal col-xs-2 alignright"><span
                                    class="price ns-text-color">￥[[${oshop.pricecommodityAll}]]</span>
                            </div>
                        </div>
                        <!-- 一个列表 -->
                        <!-- 一个列表 -->
                        <!--                        <div class="row shopping-row">-->
                        <!--                            <div class="col-xs-2  new-img  ">-->
                        <!--                                <img src="imag/cart1.jpg">-->
                        <!--                            </div>-->
                        <!--                            <div class="col-xs-5">-->
                        <!--                                <p>机械师F117-FP30 11代新品金属游戏本</p>-->
                        <!--                                <p class="sku-name ns-text-color-gray">RTX3050/144Hz屏 【标准版】8G+512G固态 </p>-->
                        <!--                            </div>-->
                        <!--                            <div class="unit-price col-xs-2 alignright"><span-->
                        <!--                                    class="price ns-text-color">￥7699.00</span></div>-->
                        <!--                            <div class="p-num col-xs-1 alignright">x1</div>-->
                        <!--                            <div class="subtotal col-xs-2 alignright"><span class="price ns-text-color">￥7699.00</span>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                        <!-- 一个列表 -->
                    </div>


                </div>

            </div>
            <!-- 4.商品清单 -->
        </div>


        <!-- 页脚结算部分 -->
        <div class="order-summary ">
            <div class="row" style="text-align: right">
                <div class="col-md-10">
                    共<span style="color: #e23435; padding-left:5px">[[${allindex}]]</span>件商品,商品总金额：
                </div>
                <div class="col-md-2">
                    <span class="price">￥<span>[[${allmoney}]]</span></span>
                </div>
            </div>

            <div class="row" style="text-align: right; margin-top: 10px">
                <div class="col-md-10">运费:</div>
                <div class="col-md-2">
                    <span class="price">￥<span>0.00</span></span>
                </div>
            </div>

            <div class="row" style="text-align: right; margin-top: 10px">
                <div class="col-md-10">优惠金额:</div>
                <div class="col-md-2">
                    <span class="price">￥<span>[[${allmoney}]]</span></span>
                </div>
            </div>

            <!--灰色部分-->
            <div class="total-addr">
                <div class="row" style="text-align: right;margin-top: 10px">
                    <div class="col-md-10">应付总额</div>
                    <div class="col-md-2">
                        <span class="real-money">￥<span>[[${allmoney}]]</span></span>
                    </div>
                </div>
                <!-- </div> -->
                <div class="row" style="text-align: right; margin-top: 10px">
                    <div class="col-md-12">
                        <span
                            class="sendAddr ns-text-color-gray">寄送至<span>[[${address1.address}]]&nbsp;[[${address1.name}]]</span>
                        </span>
                        <span class="sendMobile ns-text-color-gray">
                            收货人：<span>[[${address1.name}]]</span><span>[[${address1.phone}]]</span></span>
                        </span>
                    </div>
                </div>
            </div>
            <!--灰色部分-->

            <!--提交订单按钮-->
            <div class="row" style="text-align: right;margin-top: 10px">
                <div class="col-md-12">
                    <button type="button" class="btn btn-danger"> <a href="./pay"
                            style="color: white !important;">提交订单</a></button>
                </div>
            </div>
            <!--提交订单按钮-->
        </div>
        <!-- 页脚结算部分 -->

        <!-- 页脚 -->
        <!-- footer部分 -->
        <div class="col-xs-12 ns-footer">
            <div class="col-xs-3 ns-footer-item">
                <p>官方正品</p>
            </div>
            <div class="col-xs-3 ns-footer-item">
                <p>七天包退</p>
            </div>
            <div class="col-xs-3 ns-footer-item">
                <p>闪电配送</p>
            </div>
            <div class="col-xs-3 ns-footer-item">
                <p>售后无忧</p>
            </div>
        </div>


         <!-- footernew -->
         <div>
            <div class="site-footer">
                <div class="container">
                    <div style="display: none;" class="footer-service">
                        <ul class="list-service clearfix">
                            <li>
                                <a rel="nofollow" href="#" target="_blank">
                                    <em class="iconfont-tool"></em>官方正品
                                </a>
                            </li>
                            <li>
                                <a rel="nofollow" href="#" target="_blank">
                                    <em class="iconfont-circle-7"></em>7天无理由退货
                                </a>
                            </li>
                            <li>
                                <a rel="nofollow" href="#" target="_blank">
                                    <em class="iconfont-circle-15"></em>15天免费换货
                                </a>
                            </li>
                            <li><a rel="nofollow" href="#" target="_blank">
                                    <em class="iconfont-gift"></em>
                                    <span id="J_footerPrice">闪电配送</span>
                                </a>
                            </li>
                            <li><a rel="nofollow" href="#" target="_blank">
                                    <em class="iconfont-location"></em>售后无忧
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="footer-links clearfix">
                        <dl class="col-links col-links-first">
                            <dt>帮助中心</dt>
                            <dd><a href="https://www.machenike.com/help/21.html" title="联系我们" target="_blank">联系我们</a>
                            </dd>
                            <dd><a href="https://www.machenike.com/help/26.html" title="品牌介绍" target="_blank">品牌介绍</a>
                            </dd>
                            <dd><a href="https://www.machenike.com/help/27.html" title="营业执照" target="_blank">营业执照</a>
                            </dd>
                            <dd><a href="https://www.machenike.com/help/28.html" title="版权声明" target="_blank">版权声明</a>
                            </dd>
                        </dl>
                        <dl class="col-links ">
                            <dt>服务保证</dt>
                            <dd><a href="https://www.machenike.com/help/22.html" title="服务标准" target="_blank">服务标准</a>
                            </dd>
                            <dd><a href="https://www.machenike.com/help/23.html" title="售后保修" target="_blank">售后保修</a>
                            </dd>
                            <dd><a href="https://www.machenike.com/help/24.html" title="驱动下载" target="_blank">驱动下载</a>
                            </dd>
                            <dd><a href="https://www.machenike.com/help/25.html" title="线下体验店" target="_blank">线下体验店</a>
                            </dd>
                            <dd><a href="https://www.machenike.com/help/29.html" title="用户协议" target="_blank">用户协议</a>
                            </dd>
                            <dd><a href="https://www.machenike.com/help/30.html" title="隐私保护" target="_blank">隐私保护</a>
                            </dd>
                        </dl>
                        <dl class="col-links ">
                            <dt>会员中心</dt>
                            <dd><a href="https://www.machenike.com/help/14.html" title="我的订单" target="_blank">我的订单</a>
                            </dd>
                            <dd><a href="https://www.machenike.com/help/6.html" title="我的收藏" target="_blank">我的收藏</a>
                            </dd>
                            <dd><a href="https://www.machenike.com/help/5.html" title="资金管理" target="_blank">资金管理</a>
                            </dd>
                        </dl>
                        <dl class="col-links ">
                            <dt>配送与支付</dt>
                            <dd><a href="https://www.machenike.com/help/2.html" title="支付方式说明"
                                    target="_blank">支付方式说明</a></dd>
                            <dd><a href="https://www.machenike.com/help/8.html" title="配送支付" target="_blank">配送支付</a>
                            </dd>
                        </dl>
                        <dl class="col-links ">
                            <dt>新手上路</dt>
                            <dd><a href="https://www.machenike.com/help/18.html" title="购物流程" target="_blank">购物流程</a>
                            </dd>
                        </dl>
                        <dl class="col-links ">
                            <dt>特色服务</dt>
                            <dd><a rel="nofollow" href="#" target="_blank">F 码通道</a></dd>
                            <dd><a rel="nofollow" href="#" target="_blank">礼物码</a></dd>
                            <dd><a rel="nofollow" href="#" target="_blank">防伪查询</a></dd>
                        </dl>
                        <div class="col-contact">
                            <div class="col-links" style="width: 100px; float: left">
                                <p
                                    style=" font-size:14px; color:#424242; line-height:1.25; font-weight:normal; padding-bottom:26px;text-align: center;width: 79px">
                                    官方微博</p>
                                <a href="javascript:;"><img src="/imag/guanweibo.png"
                                        width="79px" alt=""></a>
                            </div>
                            <div class="col-links" style="width: 100px; float: left">
                                <p
                                    style=" font-size:14px; color:#424242; line-height:1.25; font-weight:normal; padding-bottom:26px;text-align: center;width: 79px">
                                    绑定设备</p>
                                <a href="javascript:;"><img src="/imag/gongzhonghao.png"
                                        width="79px" alt=""></a>
                            </div>
                            <div class="col-links" style="width: 100px; float: left">
                                <p
                                    style=" font-size:14px; color:#424242; line-height:1.25; font-weight:normal; padding-bottom:26px;text-align: center;width: 79px">
                                    微信订阅号</p>
                                <a href="javascript:;"><img src="/imag/dingyue.jpg"
                                        width="79px" alt=""></a>
                            </div>
                            <div class="col-links" style="width: 100px; float: left">
                                <p
                                    style=" font-size:14px; color:#424242; line-height:1.25; font-weight:normal; padding-bottom:26px;text-align: center;width: 79px">
                                    机械师抖音</p>
                                <a href="javascript:;"><img src="/imag/douying1.png"
                                        width="79px" alt=""></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="site-info">
                <div class="container">
                    <div class="logo ir">小米官网</div>
                    <div class="info-text">
                        <span>友情链接 : </span>
                        <div class="links-wrap" style="width: 900px;">
                            <a href="https://gamepp.com" title="游戏加加" target="_blank_">游戏加加</a>
                            <a href="http://www.jixunjsq.com" title="极迅加速器" target="_blank_">极迅加速器</a>
                            <a href="https://www.shenyou.cn/" title="神游网" target="_blank_">神游网</a>
                            <a href="https://www.zywjw.com/" title="专业玩家" target="_blank_">专业玩家</a>
                            <a href="http://www.xitong520.com" title="win10系统" target="_blank_">win10系统</a>
                        </div>
                        <p class="sites">
                            <a rel="nofollow" href="#" target="_blank">北京互联网法院法律服务工作站</a>
                            <span class="sep">|</span>
                            <a rel="nofollow" href="#" target="_blank">中国消费者协会</a>
                            <span class="sep">|</span> <a rel="nofollow" href="#" target="_blank">北京市消费者协会</a>
                        </p>
                        <p>
                        <p id="copyright_desc"></p>
                        <p>
                            <a id="copyright_companyname" href="javascript:;" target="_blank"></a>
                            <span id="copyright_meta"></span>
                        </p>
                        <p id="web_gov_record_wap">
                            <a href="javascript:;" target="_blank">
                                <img src="/public/static/images/gov_record.png" alt="公安备案">
                                <span></span>
                            </a>
                        </p>
                        </p>
                    </div>
                    <div class="info-links">
                        <a rel="nofollow" href="#" target="_blank">
                            <img rel="nofollow" src="/imag/renzheng.jpg" alt="TRUSTe Privacy Certification"></a>
                        <a rel="nofollow" href="#" target="_blank">
                            <img rel="nofollow" src="/imag/aqkx_83x30(1).png" alt="诚信网站"></a>
                        <a id="_xinchacharenzheng_cert_vip_kexinweb" rel="nofollow" href="#" target="_blank">
                            <img rel="nofollow" src="/imag/aqkx_83x30.png" alt="可信网站"></a>
                        <a rel="nofollow" href="#" target="_blank">
                            <img rel="nofollow" src="/imag/label_sm_90030.png" alt="诚信经营 放心消费"></a>
                        <a rel="nofollow" href="#" class="safe-auth J_safeAuth">
                            <img rel="nofollow" src="/imag/sm_83x30(1).png" class="img1">
                            <img rel="nofollow" src="img/home/wangzhananquan.png" class="img2">
                        </a>
                    </div>
                </div>
                <div class="slogan ir"></div>
            </div>
        </div>


        <!-- footernew -->



        <!-- 页脚 -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
    <script src="js/payment.js"></script>
    <script type="text/javascript">
        $(function () {

            //affect:1
            $(".af1").slide({
                affect: 1,
                time: 3000,
                speed: 400,
                dot_text: false,
            });
            $(".afs").slide({
                affect: 1,
                time: 3000,
                speed: 400,
                dot_text: false,
            });
            $(".afs1").slide({
                affect: 1,
                time: 3000,
                speed: 400,
                dot_text: false,
            });

            //affect:2
            $(".af2").slide({
                affect: 2,
                time: 3000,
                speed: 400,
            });



            //affect:4
            $(".af4").slide({
                affect: 4,
                time: 3000,
                speed: 400,
            });
        })
    </script>
    <script src="js/home.js"></script>
</body>

</html>